<template>
	<view class="choose-community">
		<view class="current-location">
			<view class="title">
				当前地点
			</view>
			<view class="content">
				<text>{{getHouseRoom}}</text>
			</view>
			<view class="title">
				业主信息
			</view>
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="form" ref="form1" :rules="rules">
				<u-form-item label="姓名" :borderBottom="false" labelWidth="208rpx" prop="name">
					<u--input border="none" v-model="form.name" placeholder="请填写您的真实姓名"
						placeholderStyle="color: #C3C3C5;font-size:28rpx">
					</u--input>
				</u-form-item>
				<u-form-item label="性别" :borderBottom="false" labelWidth="208rpx" prop="gender">
					<u-radio-group v-model="form.gender">
						<u-radio activeColor="#5591AF" iconSize="32rpx" labelSize="28rpx" :name="1" shape="circle"
							label="男">
						</u-radio>
						<u-radio activeColor="#5591AF" iconSize="32rpx" labelSize="28rpx" :name="0" shape="circle"
							label="女">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="手机号" :borderBottom="false" labelWidth="208rpx" prop="mobile">
					<u--input v-model="form.mobile" border="none" placeholder="请输入您的手机号"
						placeholderStyle="color: #C3C3C5;font-size:28rpx">
					</u--input>
					<!-- <view class="verification-code" slot="right">获取验证码</view> -->
					<block slot="right">
						<u-count-down @finish="onFinish" @change="onChange" v-if="isShowCountDown" :time="60 * 1000"
							format="ss">
							<view class="time">
								<text class="time__item">{{ timeData.seconds }} s后可重新发送</text>
							</view>
						</u-count-down>
						<view v-else @click="getCode" class="verification-code">获取验证码</view>
					</block>
				</u-form-item>
				<u-form-item label="验证码" :borderBottom="false" labelWidth="208rpx" prop="code">
					<u--input v-model="form.code" border="none" placeholder="请输入手机验证码"
						placeholderStyle="color: #C3C3C5;font-size:28rpx">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="uploadIdCard">
			<view class="card-title">
				<view class="">上传本人身份证照片</view>
				<view class="">请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。</view>
			</view>
			<button @chooseavatar="onChooseavatar" open-type="chooseAvatar" slot="value" class="IdCardImg">
				<!-- <view class="IdCardImg"> -->
				<image class="avatar" v-if="form.idcardFrontUrl" :src="form.idcardFrontUrl" />
				<view class="" v-else>
					<view class="image">
						<image src="../../static/icon/add.png" mode=""></image>
					</view>
					<view class="text">
						上传人像面照片
					</view>
				</view>
				<!-- </view> -->
			</button>
			<button @chooseavatar="onChooseavatar1" open-type="chooseAvatar" slot="value" class="IdCardImg">
				<!-- <view class="IdCardImg"> -->
				<image class="avatar" v-if="form.idcardBackUrl" :src="form.idcardBackUrl" />
				<view class="" v-else>
					<view class="image">
						<image src="../../static/icon/add.png" mode=""></image>
					</view>
					<view class="text">
						上传国徽面照片
					</view>
				</view>
				<!-- </view> -->
			</button>
		</view>
		<life-button @click="addHouseList" id="life-button" icon="../../static/icon/check.png">提交审核</life-button>
	</view>
</template>

<script>
	import {
		addHouseList
	} from "../../api/house.js"
	import {
		sendCode
	} from "../../api/login.js"
	export default {
		data() {
			return {
				form: {
					point: "",
					building: "",
					room: "",
					name: "",
					gender: 1,
					mobile: "",
					idcardFrontUrl: "",
					idcardBackUrl: "",
					code: null
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							transform(value) {
								return String(value);
							},
							pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
							message: '手机号码格式不正确',
							trigger: ['blur', 'change']
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^\d{6}/,
							transform(value) {
								return String(value);
							},
							type: "number",
							message: '验证码格式不正确',
							trigger: ['blur', 'change']
						}
					]
				},
				isShowCountDown: false,
				timeData: {}
			}
		},
		computed: {
			getHouseRoom() {
				return this.$store.state.house.houseRoom
			},
			getHouseBuilding() {
				return this.$store.state.house.houseBuilding
			},
			getHouseInformation() {
				return this.$store.state.house.houseInformation
			}
		},
		methods: {
			onChooseavatar(e) {
				// console.log(e);
				const avatar = e.detail.avatarUrl
				uni.uploadFile({
					url: 'https://live-api.itheima.net/upload',
					filePath: avatar,
					name: 'file',
					header: {
						Authorization: 'Bearer ' + this.$store.state.user.userToken.token
					},
					formData: {
						type: 'avatar'
					},
					success: async (res) => {
						const data = JSON.parse(res.data)
						// console.log(data.data.url);
						this.form.idcardFrontUrl = data.data.url
						// if (data.code !== 10000) {
						// 	return uni.showToast({
						// 		icon: "error",
						// 		title: "上传失败"
						// 	})
						// }
					}
				})
			},
			onChooseavatar1(e) {
				// console.log(e);
				const avatar = e.detail.avatarUrl
				uni.uploadFile({
					url: 'https://live-api.itheima.net/upload',
					filePath: avatar,
					name: 'file',
					header: {
						Authorization: 'Bearer ' + this.$store.state.user.userToken.token
					},
					formData: {
						type: 'avatar'
					},
					success: async (res) => {
						const data = JSON.parse(res.data)
						// console.log(data.data.url);
						this.form.idcardBackUrl = data.data.url
						// if (data.code !== 10000) {
						// 	return uni.showToast({
						// 		icon: "error",
						// 		title: "上传失败"
						// 	})
						// }
					}
				})
			},
			async addHouseList() {
				this.$refs.form1.validate().then(async (res) => {
					const res1 = await addHouseList(
						this.form
					)
					console.log(res1);
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			async getCode() {
				if (!this.form.mobile) {
					this.$refs.form1.validateField('mobile', err => {
						uni.$u.toast('请输入手机号')
					})
					return
				}
				this.isShowCountDown = true
				const res = await sendCode(this.form.mobile)
				this.form.code = res.data.code
				console.log(res);
			},
			onFinish() {
				this.isShowCountDown = false
			},
			onChange(e) {
				this.timeData = e
			}
		},
		onLoad() {
			this.form.point = this.getHouseInformation
			this.form.building = this.getHouseBuilding.slice(this.form.point.length)
			this.form.room = this.getHouseRoom.slice(this.getHouseBuilding.length + 1)
		}
	}
</script>

<style lang="scss">
	.choose-community {
		height: 100%;
		background-color: #FAFAFA;
		padding: 0 30rpx;

		.current-location {
			.title {
				line-height: 86rpx;
				font-size: 24rpx;
				color: #979797;
			}

			.content {
				width: 750rpx;
				height: 102rpx;
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.u-form-item__body__left__content__label {
			font-size: 28rpx !important;
			color: #333333 !important;
		}

		.u-radio__icon-wrap {
			margin-right: 8rpx !important;
		}

		.u-radio {
			margin-right: 60rpx !important;
		}

		.verification-code,
		.time__item {
			font-size: 28rpx;
			color: #5591AF;
		}


		.uploadIdCard {
			background-color: #fff;
			margin-top: 30rpx;
			padding-bottom: 275rpx;

			.card-title {
				// box-sizing: border-box;
				height: 106rpx;
				padding-top: 30rpx;
				border-bottom: 1px solid #F2F2F6;

				view {
					&:nth-child(1) {
						color: #333333;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					&:nth-child(2) {
						color: #C3C3C5;
						font-size: 22rpx;
					}
				}
			}

			.IdCardImg::after,
			.IdCardImg {
				background-color: unset;
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.IdCardImg {
				width: 690rpx;
				height: 340rpx;
				background-color: #fafafa;
				flex-direction: column;
				margin-top: 20rpx;
				border: 0 !important;

				view {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 10rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.text {
						font-size: 30rpx;
						color: #7694B0;
					}
				}
			}
		}
	}
</style>
